<template>
  <div style="padding: 10px;background-color: #0288d1;">
    <h4>孙组件</h4>
    {{visible}}
    <button @click="onModal">打开弹框</button>
    <Modal :visible="visible" @close="close"/>
  </div>
</template>

<script>
import {ref} from "vue";
import Modal from './Modal.vue'

export default {
  name: "Sun",
  components: {
    Modal
  },
  setup() {
    const visible = ref(false)

    const onModal = () => {
      visible.value = true
    }

    const close = () => {
      visible.value = false
    }

    return {
      visible,
      onModal,
      close
    }
  }
}
</script>

<style scoped>

</style>